<template>
  <div>
        <el-table v-if="isStatus==false"
          border
          width="100%"
          :data="gifts">
          <el-table-column label="赠品名称" style="width: 210px;">
            <template slot-scope="{row}">
              <el-select
                v-model="row.giftName"
                style="width: 100%;"
                placeholder="请选择赠品"
                filterable
                :filter-method="queryProduct"
                clearable
              >
                <el-option v-for="item in giftNameList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <!-- <el-select style="display: inline-block;border: 0px" remote v-model="row.giftName" placeholder="请选择赠品">
                <el-option v-for="(item,index) in giftNameList"  :label="item.name" :value="JSON.stringify(item.id)" ></el-option>
              </el-select> -->
            </template>
          </el-table-column>
          <el-table-column label="赠品数量" style="width: 100px">
          <template slot-scope="{row}">
            <el-input v-model="row.quantity" ></el-input>
          </template>
        </el-table-column>
          <el-table-column label="月限量" style="width: 100px" >
            <template slot-scope="{row}">
              <el-input v-model="row.availableQuantity"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" style="width: 80px">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <a style="margin-left: 10px" @click="deleteAd(scope.$index)">
                  <i style="color: #F56C6C" class="el-icon-delete"></i>
                </a>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

      <el-table
        :data="gifts"
        border
        v-if="isStatus==true"
        width="100%"
        >
        <el-table-column
          prop="giftName"
          label="赠品名称"
         >
          <template slot-scope="{row}">
            <el-select style="width: 180px;display: inline-block"  v-model="row.giftName" placeholder="请选择赠品" disabled>
              <el-option v-for="(item,index) in giftNameList"  :label="item.name" :value="JSON.stringify(item.id)" ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="赠品数量"
         >
        </el-table-column>
        <el-table-column
          prop="availableQuantity"
          label="月限量"
         >
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
  import { list, find } from '../../../api/product'
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../../utils/utils.js'
  export default {
    directives: {elDragDialog},
    name: 'edit-Gift',
    props:{

    },
    data(){
      return{
        gifts:[],
        getPromotionId:'',
        editVisible:true,
        giftNameList:[],
        promotionid:'',
      }
    },
    props:["editGift","editGiftType",'isStatus'],
    created() {
      // this.getGiftName(),
      this.queryProduct()
      this.getEditGift()
    },

    methods:{
      getEditGift(){
        /* if (this.editGift&&this.editGift.length>0&&this.editGift[0].giftId===0){
          this.gifts=this.editGift
          this.editGift.giftName=Number(this.editGift.giftName)
          console.log(this.editGift)
        }else{
          this.gifts=[]
        } */
        this.gifts = this.editGift
        this.gifts.forEach(item => {
          item.giftName = parseInt(item.giftName)
        })
      },
      deleteAd(index){
        this.gifts.splice(index, 1)
      },
      add(){
        let PromotionGift={
          giftId:this.editGiftType,
          giftName:'',
          quantity:0,
          availableQuantity:0,
          promotionId:this.promotionId
        }
        this.gifts.push(PromotionGift)
        console.log(this.gifts)
      },
      queryProduct(query) {
        clearTimeout(this.productMark)
        this.productMark = setTimeout(() => {
          this.giftNameList = []
          list({ name: query }).then(res => {
            this.giftNameList = res.data.data
            if (utils.isNull(this.gifts)) { return }
            this.gifts.forEach(item => { // 让每一项与列表比对,找不到则添加进去
              const notFound = this.giftNameList.find(val => { return val.id == item.giftName }) // 找到列表里没有的数据
              if (!notFound && item.giftName !== '') {
                find(item.giftName).then(res2 => {
                  this.giftNameList.unshift(res2.data.products[0]) // 把没有的数据添加到列表里
                })
              }
            })
          }).catch(err => {
            console.log(err)
          })
        }, 300)
      },
      /* getGiftName(){
        list().then(response =>{
          response.data.data.forEach(item=>{
            let gift={
              name:item.name,
              id:item.id
            }
            this.giftNameList.push(gift)

          })
        })
      } */
    }
  }
</script>

<style scoped>

</style>
